<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <p>msg: {{msg}}</p>
    <p>person: {{person}}</p>

    <button @click="update">更新</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const vm = new Vue({
      el: "#test",
      data: { // Vue内部会对data中所有层次属性都通过defineProperty添加getter/setter实现对data数据的深度劫持(监视)
        msg: 'abc',
        person: {
          name: 'tom',
          age: 12
        }
      },
      methods: {
        update () {
          // 更新基本类型数据
          // this.msg += '--'
          // this.person = {
          //   name: 'Jack',
          //   age: 13
          // }
          
          // 更新对象内部数据(已有的)
          // this.person.name = 'Jack'

          // 给对象添加一个新属性 => 界面不会自动更新
          // this.person.sex = '男'
          // 删除对象中已有属性 => 界面不会自动更新
          // delete this.person.name

          // 添加响应式属性   set方法
          // Vue.set(this.person, 'sex', '女')
          // this.$set(this.person, 'sex', '男')

          // 删除响应式属性  delete方法
          // Vue.delete(this.person, 'name')
          this.$delete(this.person, 'name')

        }
      }
    })
    console.log(vm.$data)

    /* 
    更新对象: 
      修改已有属性: 是响应式
        原因: Vue内部会对data中所有层次属性都通过defineProperty添加getter/setter实现对data数据的深度劫持(监视)
      添加新属性/删除已有属性: 不是响应式 => 界面不会自动更新
        原因: defineProperty不能监视添加和删除属性, 只能监视读取和修改属性
        解决: 
          添加: Vue.set( target, propertyName, value )  vm.$set()
          删除: Vue.delete( target, propertyName )  vm.$delete()
    */
  </script>
</body>
</html>